<template>
  <div class="tools flexLC">
    <div v-show="!parentArr.length == 0" class="toolsStyle" @click="toIndex()">
      首页
    </div>
    <div v-show="!parentArr.length == 0" class="toolsStyle" @click="toParent()">
      上一级
    </div>
    <div class="toolsStyle" @click="filterFiles()">文件筛选</div>
    <div v-if="!fileLists.length==0" class="fileList">
      <select>
        <option v-for="item in fileLists" :key="item.id">
          {{ item.extension }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileLists: [],
    };
  },
  methods: {
    filterFiles() {
      //文件类型筛选
      const originData = this.originData;
      let extensionArr = [];
      extensionArr = originData
        .filter((item, index, self) => {
          let aa = true;
          self.map((v) => {
            aa = v.extension === item.extension ? false : true;
          });
          return aa;
        })
        .filter((x) => !(x.extension === undefined || x.extension === ""));
      this.fileLists = extensionArr;
      // console.log(extensionArr);
    },
    toIndex() {
      //返回首页
      this.ParentEmits(this.fliterdDataList);
    },
    toParent() {
      //返回上一层
      this.ParentEmits(this.parentArr.pop());
    },
    ParentEmits(data) {
      //更改父组件的dataList
      this.$emit("changParentPageData", data);
    },
  },
  props: {
    parentArr: Array,
    fliterdDataList: Array,
    originData: Array,
  },
};
</script>

<style scoped>
.tools {
  height: 30px;
  background: sandybrown;
  user-select: none;
  font-size: 23px;
  box-sizing: border-box;
  padding-left: 15px;
}
.tools div {
  cursor: pointer;
}
.toolsStyle {
  color: #fff;
  box-sizing: border-box;
  padding: 7px 4px;
}
</style>